<template>
  <view class="question-container">
    <view class="question-content">
      <view class="content">
        {{ chatRecord.problem_text }}
      </view>
    </view>
    <view class="question-avatar">
      <view class="question-style">
        <img src="../../static/user-icon.svg" style="width: 50%" alt="" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineProps({
  chatRecord: {
    type: Object,
    default: () => ({}),
  },
});
</script>

<style scoped>
.question-container {
  position: relative;

  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
  animation-name: chatAnimation;
  animation-duration: 0.2s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-direction: alternate;
  z-index: 10;
}
.question-avatar {
  width: 40px;
  flex-shrink: 0;
  margin-left: 2px;
  display: flex;
  justify-content: flex-end;
}
.question-style {
  position: relative;

  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 50%;
  background-color: #e1e1e1;
}
.question-content {
  position: relative;

  padding: 16px 16px;
  border-radius: 6px;
  background-color: #2577f7;
  font-size: 14px;
  color: #ffffff;
  box-sizing: border-box;
  margin-left: 42px;
}
@keyframes chatAnimation {
  0% {
    opacity: 0.6;
    top: 10px;
  }
  100% {
    opacity: 1;
    top: 0px;
  }
}
</style>
